<template>
  <panel :title="title">
    <div slot="btn">
      <el-button size="mini" type="warning" @click="saveEdit">保存</el-button>
      <el-button size="mini" type="primary" @click="back">返回</el-button>
    </div>

    <el-form :model="editOrder" label-width="100px" class="demo-ruleForm">
      <!-- 订单号 -->
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="editOrder.orderNo"></el-input>
      </el-form-item>
      <!-- 下单时间 -->
      <el-form-item label="下单时间" prop="orderTime">
        <el-input v-model="editOrder.orderTime"></el-input>
      </el-form-item>

      <!-- 手机号 -->
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="editOrder.phone"></el-input>
      </el-form-item>

      <!-- 收货人 -->
      <el-form-item label="收货人" prop="consignee">
        <el-input v-model="editOrder.consignee"></el-input>
      </el-form-item>

      <!-- 配送地址 -->
      <el-form-item label="配送地址" prop="deliverAddress">
        <el-input v-model="editOrder.deliverAddress"></el-input>
      </el-form-item>

      <!-- 送达时间 -->
      <el-form-item label="送达时间" prop="deliveryTime">
        <el-input v-model="editOrder.deliveryTime"></el-input>
      </el-form-item>

      <!-- 用户备注 -->
      <el-form-item label="用户备注" prop="remarks">
        <el-input v-model="editOrder.remarks"></el-input>
      </el-form-item>

      <!-- 订单金额 -->
      <el-form-item label="订单金额" required class="order-money">
        <el-input-number
          v-model="editOrder.orderAmount"
          :min="0"
          :max="1000"
        ></el-input-number>
      </el-form-item>

      <!-- 订单状态 -->
      <el-form-item label="订单状态" prop="orderState">
         <el-select v-model="editOrder.orderState" placeholder="请选择订单状态">
          <el-option value="未受理"></el-option>
          <el-option value="已受理"></el-option>
          <el-option value="派送中"></el-option>
          <el-option value="已完成"></el-option>
        </el-select>
    
      </el-form-item>
    </el-form>
  </panel>
</template>

<script>
import Panel from "@/components/panel/Panel.vue";

// 引入ajax工具函数
import { getOrderDetail, editOrder } from "@/api/order";

// 处理时间格式化函数
import { normalizeFullDate } from "@/utils/tools";

export default {
  components: {
    Panel,
  },
  data() {
    return {
      title: "订单编辑",
      editOrder: {
        orderNo: "",
      },
    };
  },
  methods: {
    async getOrderDetail() {
      try {
        let res = await getOrderDetail(this.$route.query.id);
        let { data } = res.data;

        data.orderTime = normalizeFullDate(data.orderTime);
        data.deliveryTime = normalizeFullDate(data.deliveryTime);

        this.editOrder = data;
      } catch (err) {
        console.log(err);
      }
    },
    back(){
        this.$router.push('/order/order-list')
    },
    async saveEdit() {
        try {
            let res = await editOrder(this.editOrder);

            if (res.data.code === 0) {
                 this.$router.push('/order/order-list')
            }
            console.log(res)
        }catch(err) {
            console.log(err)
        }
    }
  },
  created() {
    this.getOrderDetail();
  },
};
</script>

<style lang="less" scoped>
/deep/.el-input__inner {
  width: 300px;
}
/deep/.el-input-number {
  width: 300px;
}
</style>